<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>学生阅读管理系统</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <style>
    body { font-family: Arial; margin: 20px; }
    input, button { margin: 5px; padding: 5px; }
    table { border-collapse: collapse; width: 100%; margin-top: 15px; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    th { background: #eee; }
  </style>
</head>
<body>
<h2>📚 学生阅读管理系统</h2>

<div id="loginBox">
  <h3>老师登录</h3>
  <input id="account" placeholder="账号"><br>
  <input id="pwd" placeholder="密码" type="password"><br>
  <button onclick="login()">登录</button>
</div>

<div id="mainBox" style="display:none;">
  <h3>学生列表</h3>
  <input id="searchInput" placeholder="输入姓名搜索" oninput="searchUser()">
  <table id="userTable">
    <thead>
      <tr><th>姓名</th><th>账号</th><th>班级</th><th>阅读进度</th><th>操作</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
const BMOB_ID = "d64ff3bb14139a9e951a46368a5e9843";
const BMOB_KEY = "a961ea9c358924b53a5f1f5d8f0fad9a";
axios.defaults.baseURL = "https://api2.bmob.cn/1";
axios.defaults.headers.common["X-Bmob-Application-Id"] = BMOB_ID;
axios.defaults.headers.common["X-Bmob-REST-API-Key"] = BMOB_KEY;
axios.defaults.headers.common["Content-Type"] = "application/json";

let allUsers = [];

async function login() {
  const account = document.getElementById("account").value;
  const pwd = document.getElementById("pwd").value;

  const res = await axios.get(`/classes/User?where=${encodeURIComponent(JSON.stringify({ userAccount: account, pwd: pwd, role: "teacher" }))}`);
  if (res.data.results.length > 0) {
    document.getElementById("loginBox").style.display = "none";
    document.getElementById("mainBox").style.display = "block";
    loadStudents();
  } else {
    alert("账号或密码错误");
  }
}

async function loadStudents() {
  const res = await axios.get(`/classes/User?where=${encodeURIComponent(JSON.stringify({ role: "student" }))}`);
  allUsers = res.data.results;
  renderTable(allUsers);
}

function renderTable(list) {
  const tbody = document.querySelector("#userTable tbody");
  tbody.innerHTML = "";
  list.forEach(async (u) => {
    const recRes = await axios.get(`/classes/ReadingRecord?where=${encodeURIComponent(JSON.stringify({ userAccount: u.userAccount }))}`);
    const progress = recRes.data.results[0]?.progress || 0;
    const row = `<tr>
      <td>${u.userName}</td>
      <td>${u.userAccount}</td>
      <td>${u.className || '-'}</td>
      <td><input type="number" min="0" max="100" value="${progress}" id="prog_${u.userAccount}">%</td>
      <td><button onclick="updateProgress('${u.userAccount}')">更新</button></td>
    </tr>`;
    tbody.insertAdjacentHTML("beforeend", row);
  });
}

async function updateProgress(userAccount) {
  const val = Number(document.getElementById(`prog_${userAccount}`).value);
  const query = { userAccount };
  const res = await axios.get(`/classes/ReadingRecord?where=${encodeURIComponent(JSON.stringify(query))}`);
  if (res.data.results.length > 0) {
    const objId = res.data.results[0].objectId;
    await axios.put(`/classes/ReadingRecord/${objId}`, { progress: val });
  } else {
    await axios.post(`/classes/ReadingRecord`, { userAccount, progress: val });
  }
  alert("更新成功");
}

function searchUser() {
  const kw = document.getElementById("searchInput").value.trim();
  const filtered = allUsers.filter(u => u.userName.includes(kw));
  renderTable(filtered);
}
</script>
</body>
</html>
